<script setup lang="ts">
import Table from '@/components/table/index.vue'
import type TableColumn from '@/components/table/type/TableColumn.ts'
import tb from '@/components/button/index.vue'
import {Message} from '@/hook/message/message.ts'
import MyInput from '@/components/input/index.vue'
import MySelect from '@/components/select/index.vue'
import Radio from '@/components/radio/t-radio.vue'
import CheckboxGroup from '@/components/checkbox/t-checkbox.vue'
import TForm from '@/components/form/index.vue'
import type FormField from '@/components/form/FormField'

import {reactive, ref} from "vue";

const click = (row: any) => {
  console.log(JSON.stringify(row))
}

//列信息
const columns: TableColumn[] = [
  {key: 'id', title: '序号', width: 60, align: 'right', click},
  {key: 'name', title: '姓名'},
  {key: 'age', title: '年龄', type: 'number', callback: (row) => row.age + row.age},
  {key: 'isMan', title: '是否男', type: 'switch', click: (row) => alert(row.isMan)},
  {key: 'birthday', title: '生日', type: 'date', align: 'left'},
  {
    key: 'hobby', title: '爱好', type: 'tag', callback: (row) => {
      if (row.id % 2 === 0) return '哈哈哈哈'; else return row.hobby
    }
  },
  {key: 'action', title: '操作', type: 'slot', click, align: 'center'},
]
//table数据
const data = reactive([
  {id: 1, name: '张三', birthday: '2024-12-11', isMan: true, age: 20, hobby: '唱歌'},
  {id: 2, name: '李四', birthday: '2021-11-28 23:12:12', isMan: false, age: 25, hobby: '跳舞'},
  {id: 3, name: '王五', birthday: '2011-03-28 12:21:21', isMan: true, age: 11, hobby: 'rap'},
  {id: 4, name: '赵六', birthday: '2024-12-11 ', isMan: false, age: 31, hobby: '篮球'},
])

const loading = ref<boolean>(false)

const email = ref('')
const emailInput = ref()

const emailRule = (val: string) =>
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || '请输入正确的邮箱'

function submit() {
  if (emailInput.value.validate()) {
    alert('校验通过，提交')
  } else {
    alert('校验未通过')
  }
}

const selectedCity = ref()
const radioSelected = ref()
const checkboxSelected = ref(['apple'])


// 定义表单字段结构（你自定义的 FormField 类型）
const formSchema: FormField[] = [
  {
    row: 0, colSpan: 8, key: 'name', label: '姓名', type: 'input', required: true, event: {
      blur: () => console.log(123)
    }, attr: {
      rules: [emailRule]
    }
  },
  {
    row: 0, colSpan: 8, key: 'age', label: '年龄', type: 'number', placeholder: '请输入年龄', attr: {
      min: 12, max: 33, step: 3
    }
  },
  {row: 0, colSpan: 4, key: 'hobby', label: '哀嚎', type: 'select', options: [
      {label: '唱', value: 'sing'},
      {label: '跳', value: 'jump'},
      {label: 'RAP', value: 'rap'},
      {label: '篮球', value: 'basketball'}
    ]},
  {row: 1, colSpan: 24, key: 'bio', label: '简介', type: 'textarea'},
  {
    row: 2,
    colSpan: 24,
    key: 'gender',
    label: '性别',
    type: 'radio',
    options: [
      {label: '男', value: 'male'},
      {label: '女', value: 'female'}
    ]
  },
  {
    row: 3,
    colSpan: 24,
    key: 'hobbies',
    label: '爱好',
    type: 'checkbox',
    options: [
      {label: '音乐', value: 'music'},
      {label: '运动', value: 'sports'}
    ]
  },
  {row: 4, colSpan: 24, key: 'enabled', label: '是否启用', type: 'switch'},
  {row: 5, colSpan: 8, key: 'submit', label: '提交', type: 'slot'}
]

const formModel = reactive({
  name: '', age: '', hobby: '', bio: '', gender: '', hobbies: [], enabled: ''
})

// 提交处理函数
function handleSubmit(field: any, model: any) {
  console.log('field：', field)
  console.log('model：', model)
  // 你可以将 data 发给后端接口、存储到 Vuex 等
}

</script>

<template>
  <Table :columns="columns" :data="data" :loading="loading">
    <template v-slot:action="{row}">
      <tb type="success" pageSize="small" @click="click(row)">点击</tb>
      <tb type="danger" pageSize="small" @click="click(row)">点击</tb>
    </template>
  </Table>


  <tb pageSize="small" type="success" @click="Message.success('操作成功')">success</tb>
  <tb pageSize="medium" type="warning" @click="Message.warning('fbi warning!open the door!')">warning</tb>
  <tb pageSize="large" type="danger" @click="Message.error('操作失败')">danger</tb>
  <tb pageSize="small" type="default" @click="Message.info('你好啊')">none</tb>
  <tb type="default" @click="loading = !loading">loading</tb>

  <MyInput label="姓 名"
           v-model="email"
           :rules="[emailRule]"
           required
           ref="emailInput"
           placeholder="请输入邮箱"
           @blur="console.log(email)"
           @focus="console.log(email)"
  >
    <template #prefix>
      <component is="upload"></component>
    </template>
  </MyInput>
  <button @click="submit">提交</button>
  <MyInput placeholder="number" type="number" min="0" max="120" step="0.1"></MyInput>

  <MySelect
      v-model="selectedCity"
      :options="[
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai', disabled: true },
    { label: '广州', value: 'guangzhou' }
  ]"
      placeholder="请选择城市"
  />

  <Radio
      v-model="radioSelected"
      :options="[
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '西瓜', value: 'watermelon', disabled: true }
  ]"
  />

  <CheckboxGroup
      v-model="checkboxSelected"
      direction="column"
      :options="[
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '葡萄', value: 'grape', disabled: true }
  ]"
  />


  <TForm :structure="formSchema" :model="formModel">
    <template #submit="{field, model}">
      <tb @click="handleSubmit(field, model)" pageSize="small" type="success">哈哈哈</tb>
    </template>
  </TForm>
</template>

<style scoped>

</style>